<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.2"></script>
    <script type="text/javascript" src="/admin/js-css/js/upload.js?v=1.6"></script>


    <link rel="stylesheet" href="../css/base.css">
    <title>手机上传文件</title>
</head>

<body>
    <div id="app">
        <div class="card">
            <div style="padding: 10px;">
                <div class="contents bottombord">
                    <label class="title" >患者姓名：</label>
                    <input type="text" v-model="data1.mapformdata.xm" name=""  placeholder="请输入患者姓名">
                </div>
                <div class="contents bottombord">
                    <label class="title" >电话：</label>
                    <input type="text" name="" v-model="data1.mapformdata.dh"  placeholder="请输入联系方式">
                </div>

            </div>
        </div>

        <div class="card">
            <div style="padding: 10px;">
                <div class="contents" v-if="data1.zdmc == 'hfly'" >
                    <label class="title" >电话录音：</label>
                    <div>
                        <button type="button" class="layui-btn"  id="url" >录音上传</button>
                    </div>
                </div>

                <div class="contents"  v-if="data1.zdmc == 'wxltjt'"  >
                    <label class="title" >微信截图：</label>
                    <div>
                        <button type="button" class="layui-btn"  id="wxjt" >截图上传</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="btns">
            <button class="btn" @click="saveBaoxiu" >立即提交</button>
        </div>
    </div>
</body>
<script>
    var upload = null;
    var vm = new Vue({
        el: '#app',
        data: {
            data1:{mapformdata:{}},
            parmsData:{},
            fileObjdata:{wxjt:"",url:""},
        },
        async created() {
            this.parmsData = getParams();
            await this.getdata();
            this.initpage();
        },
        methods: {
            initpage(){
                layui.use(['form','jquery','upload','layedit'], function(){
                    upload = layui.upload;
                    if(vm.data1.zdmc == 'hfly'){
                        vm.fileInit("url");
                    }
                    if(vm.data1.zdmc == 'wxltjt'){
                        vm.fileInit("wxjt");
                    }
                });
            },
            fileInit(id){
                let upload = layui.upload;
                //执行实例
                var uploadInst = upload.render({
                    elem: '#'+id //绑定元素
                    ,url: wwwurl+'/admin/api/UploadController/systemDopostFileUpload' //上传接口
                    ,multiple:true,
                    accept: 'file',
                    headers: {
                        secret:getSecret(),
                        token:vm.parmsData.token
                    },
                    before:function(obj){
                        this.headers.secret = getSecret();
                    },
                    progress: function(n, elem, res, index){
                        var percent = n + '%' //获取进度百分比
                        $(elem).text("文件上传"+percent);
                        // console.log(percent);
                        // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                        // console.log(res); //得到 progress 响应信息
                        // console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
                    },
                    done: function(res){
                        let src = res.data.src;
                        console.log(src);
                        if(vm.fileObjdata[id] == ""){
                            vm.fileObjdata[id] = src;
                        }else {
                            vm.fileObjdata[id] = vm.fileObjdata[id]+","+src;
                        }

                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
            },
            async saveBaoxiu(){
                let index = load();
                const res = await postWebCustom("mingyihuifang-3295",{url:""+this.fileObjdata.url,wxjt:""+this.fileObjdata.wxjt,id:this.parmsData.id});
                layer.close(index);
                layer.msg(res.msg);
            },
            async getdata(){
                const res = await postWebCustom("mingyihuifang-3294",{id:this.parmsData.id});
                this.data1 = res.data;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(res,file) {
                console.log(res,file);
                this.imageUrl = res.data.src;
            }
        },

    })
</script>
<style type="text/css">
    body {
        margin: 0;
        background: rgb(228, 225, 225);
    }

    #app {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .card {
        width: 100%;
        background: #fff;
        margin-bottom: 10px;
    }

    .title {
        color: #409eff;
    }

    .contents {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 80px 1fr);
    }

    .contents label {
        width: 80px;
        line-height: 45px;
        /* text-align: right; */
    }

    .contents p {
        line-height: 14px;
    }

    .contents input {
        width: 100%;
        height: 45px;
        padding: 10px;
        border-color: #ddd;
        border-radius: 8px;
        border-style: solid;
        border: none;
        outline: none;
        font-size: 16px;
    }

    .contents .input {
        border: none;
    }

    .btns {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .btn {
        width: 80%;
        background-color: #409eff;
        color: #fff;
        margin: 0 20px;
        padding: 10px 30px;
        border: none;
        border-radius: 4px;
    }

    .bottombord {
        border-bottom: 1px solid #eee;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
</style>

</html>